import { useEffect, useState } from "react";
import withLogin from "../../Components/withLogin";
import { request } from "../../utils/request";
import { InfiniteScroll } from "antd-mobile";
import ListItem from "../../components/listItem";
import { useNavigate } from "react-router-dom";

const List = () => {
  const [list, setList] = useState([]);
  const [page, setPage] = useState(1);
  const navigte = useNavigate();
  const getData = async () => {
    const resp = await request.get("/list", { params: { page } });
    setList(list.concat(resp.data.data));
    setPage(page + 1);
    console.log(resp.data.data);
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <div>
      {list.map((v) => {
        return (
          <ListItem
            key={v.id}
            v={v}
            onClick={() => navigte(`/detail/${v.id}`, { state: v })}
          ></ListItem>
        );
      })}
      <InfiniteScroll hasMore={true} loadMore={getData}></InfiniteScroll>
    </div>
  );
};

export default withLogin(List);
